<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员订单管理</title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/管理员订单管理.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>

<body class="bg-gray-100">
<!-- 侧边栏 -->
<div class="flex h-screen">
    <div class="sidebar bg-primary-dark text-primary-light w-64 p-4">
        <div class="logo mb-8">
            <h2 class="text-2xl font-bold">管理系统</h2>
        </div>
        <div class="nav-menu space-y-4">
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-shopping-cart mr-3"></i>
                <span><a href="管理员订单管理.html">订单管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-truck mr-3"></i>
                <span><a href="管理员运输管理.html">运输管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-boxes mr-3"></i>
                <span><a href="管理员库存管理.html">库存管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-warehouse mr-3"></i>
                <span><a href="管理员仓库管理.html">仓库管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-users mr-3"></i>
                <span><a href="管理员用户管理.html">用户管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-cog mr-3"></i>
                <span><a href="管理员系统设置.html">系统设置</a></span>
            </div>
        </div>
    </div>
    <!-- 主内容区域 -->
    <div class="flex-1 overflow-y-auto">
        <!-- 头部 -->
        <div class="header bg-white shadow-md p-4 flex justify-between items-center">
            <div class="search-bar relative">
                <input type="text" id="searchInput" placeholder="搜索..."
                       class="border border-gray-300 rounded p-2 pr-10 w-64 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                <i class="fas fa-search absolute right-3 top-3 text-gray-500"></i>
            </div>
            <div class="user-info flex items-center">
                <img src="https://picsum.photos/30/30" alt="用户头像" class="rounded-full mr-2">
                <span class="font-bold">管理员</span>
            </div>
        </div>
        <!-- 管理员工具栏 -->
        <div class="admin-toolbar bg-white p-4 shadow-md flex justify-between items-center">
            <div class="quick-stats flex space-x-8">
                <div class="stat-item stat-card">
                    <i class="fas fa-shopping-cart mr-3"></i>
                    <div class="stat-value">200</div>
                    <div class="stat-label text-gray-500">总订单数</div>
                    <div class="stat-change"><i class="fas fa-arrow-up"></i> 8%</div>
                </div>
                <div class="stat-item stat-card">
                    <i class="fas fa-check-circle mr-3"></i>
                    <div class="stat-value">50</div>
                    <div class="stat-label text-gray-500">已完成订单</div>
                    <div class="stat-change"><i class="fas fa-arrow-up"></i> 12%</div>
                </div>
                <div class="stat-item stat-card">
                    <i class="fas fa-clock mr-3"></i>
                    <div class="stat-value">120</div>
                    <div class="stat-label text-gray-500">处理中订单</div>
                    <div class="stat-change"><i class="fas fa-arrow-down"></i> 5%</div>
                </div>
                <div class="stat-item stat-card">
                    <i class="fas fa-times-circle mr-3"></i>
                    <div class="stat-value">30</div>
                    <div class="stat-label text-gray-500">已取消订单</div>
                    <div class="stat-change"><i class="fas fa-arrow-up"></i> 3%</div>
                </div>
            </div>
            <div class="action-buttons flex space-x-4">
                <button class="btn btn-primary-custom">导出订单数据</button>
                <button class="btn btn-success bg-green-500 text-white p-2 rounded hover:bg-green-600">生成订单报告</button>
            </div>
        </div>
        <!-- 仪表盘 -->
        <div class="dashboard p-4">
            <div class="dashboard-title flex justify-between items-center">
                <h3 class="text-xl font-bold">订单管理仪表盘</h3>
                <div class="dropdown relative">
                    <button class="btn btn-warning bg-yellow-500 text-white p-2 rounded hover:bg-yellow-600" id="advancedActionsBtn">高级操作</button>
                    <div class="dropdown-content absolute hidden bg-white shadow-lg rounded mt-1 z-10" id="advancedActionsDropdown">
                        <a href="#" class="block p-2 hover:bg-gray-200" data-bs-toggle="modal" data-bs-target="#importOrderModal">批量导入订单</a>
                        <a href="#" class="block p-2 hover:bg-gray-200" data-bs-toggle="modal" data-bs-target="#dataCleanOrderModal">订单数据清理</a>
                    </div>
                </div>
            </div>
            <div class="filter-bar flex space-x-4 mb-4">
                <div class="filter-bar flex space-x-4 mb-4">
                    <div class="filter-group">
                        <label for="order-status-filter">订单状态</label>
                        <select id="order-status-filter">
                            <option value="all">全部</option>
                            <option value="processing">处理中</option>
                            <option value="completed">已完成</option>
                            <option value="cancelled">已取消</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label for="order-date-filter">订单日期</label>
                        <input type="date" id="order-date-filter">
                    </div>
                    <button class="btn btn-primary-custom">筛选</button>
                    <button class="btn btn-secondary-custom">重置</button>
                </div>
            </div>

            <table id="orderTable" class="order-list bg-white shadow-md rounded mb-4">
                <thead>
                <tr>
                    <th class="p-2 border-b">#</th>
                    <th class="p-2 border-b">订单编号</th>
                    <th class="p-2 border-b">客户姓名</th>
                    <th class="p-2 border-b">订单金额</th>
                    <th class="p-2 border-b">订单状态</th>
                    <th class="p-2 border-b">下单时间</th>
                    <th class="p-2 border-b">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="p-2 border-b">1</td>
                    <td class="p-2 border-b">O001</td>
                    <td class="p-2 border-b">张三</td>
                    <td class="p-2 border-b">￥500.00</td>
                    <td class="p-2 border-b"><span class="order-status order-status-processing">处理中</span></td>
                    <td class="p-2 border-b">2025-04-01</td>
                    <td class="p-2 border-b">
                        <button class="btn btn-sm btn-primary-custom view-detail-btn">查看详情</button>
                        <button class="btn btn-sm btn-warning bg-yellow-500 text-white p-1 rounded hover:bg-yellow-600">编辑</button>
                    </td>
                </tr>
                <tr>
                    <td class="p-2 border-b">2</td>
                    <td class="p-2 border-b">O002</td>
                    <td class="p-2 border-b">李四</td>
                    <td class="p-2 border-b">￥800.00</td>
                    <td class="p-2 border-b"><span class="order-status order-status-completed">已完成</span></td>
                    <td class="p-2 border-b">2025-04-02</td>
                    <td class="p-2 border-b">
                        <button class="btn btn-sm btn-primary-custom view-detail-btn">查看详情</button>
                        <button class="btn btn-sm btn-warning bg-yellow-500 text-white p-1 rounded hover:bg-yellow-600">编辑</button>
                    </td>
                </tr>
                <tr>
                    <td class="p-2 border-b">3</td>
                    <td class="p-2 border-b">O003</td>
                    <td class="p-2 border-b">王五</td>
                    <td class="p-2 border-b">￥300.00</td>
                    <td class="p-2 border-b"><span class="order-status order-status-cancelled">已取消</span></td>
                    <td class="p-2 border-b">2025-04-03</td>
                    <td class="p-2 border-b">
                        <button class="btn btn-sm btn-primary-custom view-detail-btn">查看详情</button>
                        <button class="btn btn-sm btn-warning bg-yellow-500 text-white p-1 rounded hover:bg-yellow-600">编辑</button>
                    </td>
                </tr>
                </tbody>
            </table>

            <div class="pagination flex justify-between items-center mt-4">
                <div>
                    <span id="currentPageInfo">当前第 1 页，共 1 页，总计 3 条记录</span>
                </div>
                <div class="flex space-x-2">
                    <button onclick="prevPage()" class="btn btn-secondary-custom">上一页</button>
                    <div class="flex space-x-1 pagination-buttons">
                        <button class="btn btn-page bg-blue-500 text-black-50">1</button>
                    </div>
                    <button onclick="nextPage()" class="btn btn-secondary-custom">下一页</button>
                </div>
            </div>


        </div>
    </div>
    <!-- 添加订单模态框 -->
    <div class="modal fade" id="addOrderModal" tabindex="-1" aria-labelledby="addOrderModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addOrderModalLabel">添加订单</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addOrderForm">
                        <div class="mb-3">
                            <label for="orderNumber" class="form-label">订单编号</label>
                            <input type="text" class="form-control" id="orderNumber" required>
                        </div>
                        <div class="mb-3">
                            <label for="customerName" class="form-label">客户姓名</label>
                            <input type="text" class="form-control" id="customerName" required>
                        </div>
                        <div class="mb-3">
                            <label for="orderAmount" class="form-label">订单金额</label>
                            <input type="number" step="0.01" class="form-control" id="orderAmount" required>
                        </div>
                        <div class="mb-3">
                            <label for="orderStatus" class="form-label">订单状态</label>
                            <select class="form-select" id="orderStatus" required>
                                <option value="processing">处理中</option>
                                <option value="completed">已完成</option>
                                <option value="cancelled">已取消</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="orderDate" class="form-label">下单时间</label>
                            <input type="date" class="form-control" id="orderDate" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveOrderBtn">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 编辑订单模态框 -->
    <div class="modal fade" id="editOrderModal" tabindex="-1" aria-labelledby="editOrderModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editOrderModalLabel">编辑订单</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editOrderForm">
                        <input type="hidden" id="editOrderId">
                        <div class="mb-3">
                            <label for="editCustomerName" class="form-label">客户姓名</label>
                            <input type="text" class="form-control" id="editCustomerName" required>
                        </div>
                        <div class="mb-3">
                            <label for="editOrderAmount" class="form-label">订单金额</label>
                            <input type="number" step="0.01" class="form-control" id="editOrderAmount" required>
                        </div>
                        <div class="mb-3">
                            <label for="editOrderStatus" class="form-label">订单状态</label>
                            <select class="form-select" id="editOrderStatus" required>
                                <option value="processing">处理中</option>
                                <option value="completed">已完成</option>
                                <option value="cancelled">已取消</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="editOrderDate" class="form-label">下单时间</label>
                            <input type="date" class="form-control" id="editOrderDate" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveEditOrderBtn">保存修改</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 批量导入订单模态框 -->
    <div class="modal fade" id="importOrderModal" tabindex="-1" aria-labelledby="importOrderModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importOrderModalLabel">批量导入订单</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="importOrderFile" class="form-label">选择CSV文件</label>
                        <input type="file" class="form-control" id="importOrderFile" accept=".csv">
                    </div>
                    <div class="alert alert-info">
                        CSV格式要求：订单编号,客户姓名,订单金额,订单状态,下单时间
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="importOrdersBtn">导入</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 订单数据清理模态框 -->
    <div class="modal fade" id="dataCleanOrderModal" tabindex="-1" aria-labelledby="dataCleanOrderModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="dataCleanOrderModalLabel">订单数据清理</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-danger">警告：此操作将删除所有订单数据，且不可恢复！</p>
                    <p>您确定要继续吗？</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="dataCleanOrderBtn">确认清理</button>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 查看详情模态框 -->
<div class="modal fade" id="orderDetailModal" tabindex="-1" aria-labelledby="orderDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="orderDetailModalLabel">订单详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">订单编号</label>
                    <p id="detailOrderNumber" class="form-control-static"></p>
                </div>
                <div class="mb-3">
                    <label class="form-label">客户姓名</label>
                    <p id="detailCustomerName" class="form-control-static"></p>
                </div>
                <div class="mb-3">
                    <label class="form-label">订单金额</label>
                    <p id="detailOrderAmount" class="form-control-static"></p>
                </div>
                <div class="mb-3">
                    <label class="form-label">订单状态</label>
                    <p id="detailOrderStatus" class="form-control-static"></p>
                </div>
                <div class="mb-3">
                    <label class="form-label">下单时间</label>
                    <p id="detailOrderDate" class="form-control-static"></p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 导出订单数据模态框 -->
<div class="modal fade" id="exportOrderModal" tabindex="-1" aria-labelledby="exportOrderModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exportOrderModalLabel">导出订单数据</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <pre id="exportOrderData"></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 生成订单报告模态框 -->
<div class="modal fade" id="generateReportModal" tabindex="-1" aria-labelledby="generateReportModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="generateReportModalLabel">生成订单报告</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <pre id="generateReportData"></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</div>

<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/管理员订单管理.js"></script>
</body>
</html>